<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" xmlns:shriro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <meta charset="utf-8"/>
    <title>米塔云平台管理系统</title>
    <link href="../plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="../plugins/bootstrapValidator/bootstrapValidator.min.css" rel="stylesheet">
    <link href="../plugins/font-awesome/css/all.min.css" rel="stylesheet">
    <link href="../customize/css/iconfont.css" rel="stylesheet">
    <link href="../layuiadmin/layui/css/layui.css" rel="stylesheet">
    <link href="../customize/css/content.css" rel="stylesheet">
    <style>
        a {
            color: #007BFF;
        }

        a:hover {
            color: #0056B3;
        }
    </style>
</head>
<body>
<div class="m-3">
    <div class="custom-section">
        <nav class="mb-3">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><i class="iconfont icon-xiaolan8"></i> 权限管理</li>
                <li class="breadcrumb-item active"><i class="iconfont icon-xiaolan10"></i> 角色管理</li>
            </ol>
        </nav>
        <div class="d-flex align-items-center justify-content-between">
            <div>
                <div class="input-group mb-3">
                    <input type="text" class="form-control" id="searchValue" placeholder="快捷查询">
                    <div class="input-group-append">
                        <button class="btn btn-primary" type="button" onclick="getRoleList();"><i
                                class="iconfont icon-dituyechaxun"></i></button>
                    </div>
                </div>
            </div>
            <div>
                <button shiro:hasPermission="sys:user:opera" class="btn btn-primary" id="addRole" type="button" style="display: none;" onclick="addInfo()"><i
                        class="fa fa-plus"></i> 添加角色
                </button>
            </div>
        </div>
        <table class="table table-striped table-bordered" id="roleList"></table>
        <div id="page" class="page_div"></div>
    </div>
</div>
<!-- Modal -->
<div shiro:hasPermission="sys:user:opera" class="modal fade" id="addInfoModal" data-backdrop="static" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <form class="modal-content text-body" id="addInfoForm">
            <div class="modal-header">
                <div class="modal-title"><i class="iconfont icon-juxing"></i><span id="modal_title"></span></div>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="text-secondary font-p12 mb-2">注：带<span class="form-required">*</span><span class="ml-3"></span>标识的为必填项</div>
                <div class="modal-sub-title d-flex align-items-center mb-3">
                    <i class="iconfont icon-juxing text-primary"></i><span>角色基本信息</span>
                </div>
                <input type="text" name="id" id="validationCustom00" hidden>
                <div class="container">
                    <div class="row">
                        <div class="form-group col-4">
                            <label for="validationCustom01">角色名称<span class="form-required">*</span></label>
                            <input class="form-control" type="text" name="displayName" id="validationCustom01">
                        </div>
                        <div class="form-group col-4">
                            <label for="type">类型<span class="form-required">*</span></label>
                            <span class="text-muted font-p12 ml-2">设定角色可见级别</span>
                            <select class="form-control" name="type" id="type">
                                <option value="0">系统</option>
                             <!--   <option value="1">银行</option>-->
                            </select>
                        </div>
                        <div class="form-group col-4">
                            <label for="validationCustom03">有效期<span class="form-required">*</span></label>
                            <span class="text-muted font-p12 ml-2">角色启用后可访问系统的时间</span>
                            <select class="form-control" name="expire" id="validationCustom03">
                                <option value="0">永久</option>
                                <option value="1">1天</option>
                                <option value="7">一周</option>
                                <option value="30">1个月</option>
                                <option value="60">3个月</option>
                                <option value="180">半年</option>
                                <option value="365">1年</option>
                                <option value="1095">3年</option>
                            </select>
                        </div>
                        <div class="form-group col-12">
                            <label for="validationCustom02">角色说明<span class="form-required">*</span></label>
                            <input class="form-control" type="text" name="desc" id="validationCustom02">
                        </div>
                    </div>
                </div>
                <div class="modal-sub-title d-flex align-items-center mb-3">
                    <i class="iconfont icon-juxing text-primary"></i><span>角色访问权限<small class="form-required">*</small></span>
                </div>
                <div class="font-p14" id="userAuthorityTree"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="submit" class="btn btn-primary" >提交保存</button>
            </div>
        </form>
    </div>
</div>
</body>
<script src="../plugins/jquery-3.4.1.min.js"></script>
<script src="../plugins/bootstrap/bootstrap.bundle.min.js"></script>
<script src="../plugins/bootstrapValidator/bootstrapValidator.min.js"></script>
<script src="../plugins/bootstrapValidator/zh_CN.js"></script>
<script src="../layuiadmin/layui/layui.js"></script>
<script src="../plugins/alert.js"></script>
<script src="../plugins/paging.js"></script>
<script src="../plugins/laydate/laydate.js"></script>
<script src="../customize/js/common.js"></script>
<script src="../customize/js/customModalV2.js"></script>
<script src="../customize/js/CommonUtils.js"></script>
<script src="../customize/js/roleManagement.js"></script>
<script>
    var sysRoleView = false;
    var sysRoleOpera = false;
    var titleLabel = ['order', 'roleName', 'desc', 'type', 'expire'];
    var titleList = ['#', '角色名称', '角色说明', '可见级别', '有效期'];
</script>

<shriro:hasPermission name="sys:role:view">
    <script>
        sysRoleView = true;
    </script>
</shriro:hasPermission>

<shiro:hasPermission name="sys:user:opera">
    <script>
        sysRoleOpera = true;
        titleLabel.push('opera');
        titleList.push('操作');
    </script>
</shiro:hasPermission>

</html>